<template>
  <div class="content">
    <div class="top-seach">
      <div class="top-item">
        <div class="top-name">年度</div>
        <div class="block" style="width:200px;">
          <el-date-picker v-model="value3" type="year" style="width:200px;" placeholder="选择年"></el-date-picker>
        </div>
      </div>
      <div class="top-item">
        <div class="top-name">部门/单位</div>
        <div class="block" style="width:200px;">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              style="width:200px;"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
        <div class="top-item">
        <div class="top-name">媒介</div>
        <div class="block" style="width:200px;">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              style="width:200px;"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
        <div class="top-item">
        <div class="top-name">频道</div>
        <div class="block" style="width:200px;">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              style="width:200px;"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
        <div class="top-item">
        <div class="top-name">节目</div>
        <div class="block" style="width:200px;">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              style="width:200px;"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
        <div class="top-item">
        <div class="top-name">类型</div>
        <div class="block" style="width:200px;">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              style="width:200px;"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="info-content">
      <div class="info-top1">
        <div class="left-top">
          <div class="coloritem">
            <div class="clor"></div>
            <div class="clor-name">有广告播出</div>
          </div>
          <div class="coloritem">
            <div class="clor" style="background:rgba(153, 153, 153, 1);"></div>
            <div class="clor-name">有资源锁定</div>
          </div>
          <div class="coloritem">
            <div class="clor" style="background:rgba(204, 204, 204, 1);"></div>
            <div class="clor-name">有锁定队列</div>
          </div>
          <div class="coloritem">
            <div class="clor" style="background:#fff;"></div>
            <div class="clor-name">空闲资源</div>
          </div>
          <div class="coloritem">
            <div class="clor" style="background:rgba(255, 102, 153, 1);"></div>
            <div class="clor-name">混合态</div>
          </div>
        </div>
        <div class="right-top"><el-button type="primary">保存计划</el-button></div>
        
      </div>
      <div class="itemwarp">
        
        <div class="citywarp" v-for="i in 25" :key=i><city></city></div>
      </div>
    </div>
  </div>
</template>
<script>
import city from './components/cityIfon'
export default {
  components:{
  city
  },
  data() {
    return {
      value3: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: ""
    };
  }
};
</script>
<style lang="scss" scoped>
.top-seach {
  width: 97%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  .top-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-right: 15px;
    .top-name {
      font-size: 14px;
      // text-align: center;
      width: 90px;
    }
  }
}
.info-content{
  width: 97%;
  margin: 0 auto;
  .info-top1{
    height: 50px;
    width: 97%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-top{
      flex: 1;
      display: flex;
      .coloritem{
        display: flex;
        align-items: center;
        margin-right: 25px;
        .clor{
          width: 32px;
          height: 32px;
          background: rgba(25, 158, 216, 1);
          border: 1px solid rgba(121, 121, 121, 1);
         
        }
         .clor-name{
            font-size: 14px;
            margin-left: 15px;
          }
      }
    }
    .right-top{
      width: 60px;
    }
  }
  .itemwarp{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .citywarp{
      width: 128px;
      height: 127px;
      // background: chartreuse;
    }
  }
}
</style>